import React, { useEffect, useLayoutEffect, useInsertionEffect } from 'react'

export default function App() {

    // 在挂载阶段执行的函数
    useEffect(() => {
        console.log('useEffect');
    }, [])

    // 该 hooks 会在浏览器重新绘制平面之前进行处罚
    useLayoutEffect(() => {
        // 会比 useEffect 先执行
        console.log('useLayoutEffect');
    }, [])

    useInsertionEffect(() => {
        console.log('useInsertionEffect');
    }, [])


    // react 中 hooks 只能在函数组件的最顶层使用，和在自定义 hooks 中使用
    function useCss(rule) {
        useInsertionEffect(() => {
            document.getElementById('title').style.color = rule
            // 直接在样式表中添加内容
            // document.head.appendChild()
        })
    }

    useCss('red')

    return (
        <div>
            <h1 id='title'>App</h1>
        </div>
    )
}
